<template>
  <div class="devices">
    <el-card class="devices-card">
      <template #header>
        <div class="card-header">
          <span class="header-title">设备列表</span>
          <div class="header-actions">
            <!-- 筛选器 -->
            <div class="filters">
              <el-select
                v-model="selectedOfficeId"
                placeholder="选择办公室"
                clearable
                @change="onOfficeChange"
                style="width: 150px; margin-right: 10px;"
              >
                <el-option
                  v-for="office in offices"
                  :key="office.id"
                  :label="office.officeName"
                  :value="office.id"
                />
              </el-select>
              
              <el-select
                v-model="selectedWorkAreaId"
                placeholder="选择办公区"
                clearable
                @change="onWorkAreaChange"
                style="width: 150px; margin-right: 10px;"
                :disabled="!selectedOfficeId"
              >
                <el-option
                  v-for="workArea in workAreas"
                  :key="workArea.id"
                  :label="workArea.areaName"
                  :value="workArea.id"
                />
              </el-select>
              
              <el-select
                v-model="selectedDeviceType"
                placeholder="设备类型"
                clearable
                @change="filterDevices"
                style="width: 120px; margin-right: 10px;"
              >
                <el-option label="空调" value="AIR_CONDITIONER" />
                <el-option label="加湿器" value="HUMIDIFIER" />
                <el-option label="灯光" value="LIGHT" />
                <el-option label="传感器" value="SENSOR" />
                <el-option label="其他" value="OTHER" />
              </el-select>
            </div>
            
            <el-button type="primary" size="small" @click="refreshDevices" class="refresh-btn">
              <el-icon><Refresh /></el-icon>
              <span class="btn-text">刷新</span>
            </el-button>
          </div>
        </div>
      </template>

      <!-- 移动端卡片视图 -->
      <div class="mobile-device-list" v-if="isMobile">
        <div 
          v-for="device in deviceList" 
          :key="device.deviceId" 
          class="device-card-mobile"
          @click="viewDevice(device)"
        >
          <div class="device-header">
            <div class="device-info">
              <h4 class="device-name">{{ device.deviceName }}</h4>
              <p class="device-id">{{ device.deviceId }}</p>
            </div>
            <div class="device-status">
              <el-tag
                :type="device.status === 'ONLINE' ? 'success' : device.status === 'FAULT' ? 'danger' : 'info'"
                size="small"
              >
                {{ getStatusText(device.status) }}
              </el-tag>
            </div>
          </div>
          <div class="device-details">
            <div class="detail-item">
              <span class="label">类型:</span>
              <el-tag :type="getDeviceTypeTag(device.deviceType)" size="small">
                {{ getDeviceTypeText(device.deviceType) }}
              </el-tag>
            </div>
            <div class="detail-item">
              <span class="label">办公室:</span>
              <span class="value">{{ getOfficeName(device.officeId) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">办公区:</span>
              <span class="value">{{ getWorkAreaName(device.workAreaId) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">最后在线:</span>
              <span class="value">{{ formatTime(device.lastOnlineTime) }}</span>
            </div>
          </div>
          <div class="device-actions">
            <el-button size="small" type="primary" @click.stop="viewDevice(device)">
              详情
            </el-button>
            <el-button size="small" type="success" @click.stop="controlDevice(device)">
              控制
            </el-button>
          </div>
        </div>
      </div>

      <!-- 桌面端表格视图 -->
      <el-table :data="deviceList" border style="width: 100%" v-else class="devices-table">
        <el-table-column prop="deviceId" label="设备编号" width="150" />
        <el-table-column prop="deviceName" label="设备名称" width="180" />
        <el-table-column prop="deviceType" label="设备类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getDeviceTypeTag(row.deviceType)" size="small">
              {{ getDeviceTypeText(row.deviceType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="办公室" width="120">
          <template #default="{ row }">
            {{ getOfficeName(row.officeId) }}
          </template>
        </el-table-column>
        <el-table-column label="办公区" width="120">
          <template #default="{ row }">
            {{ getWorkAreaName(row.workAreaId) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag
              :type="row.status === 'ONLINE' ? 'success' : row.status === 'FAULT' ? 'danger' : 'info'"
              size="small"
            >
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastOnlineTime" label="最后在线时间" width="180">
          <template #default="{ row }">
            {{ formatTime(row.lastOnlineTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="250">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="viewDevice(row)">
              查看详情
            </el-button>
            <el-button size="small" type="success" @click="controlDevice(row)">
              设备控制
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 设备详情对话框 -->
    <el-dialog 
      v-model="detailVisible" 
      title="设备详情" 
      :width="isMobile ? '95%' : '60%'"
      :fullscreen="isMobile"
      class="device-detail-dialog"
    >
      <div v-if="selectedDevice" class="device-detail-content">
        <el-descriptions :column="isMobile ? 1 : 2" border class="device-descriptions">
          <el-descriptions-item label="设备编号">
            {{ selectedDevice.deviceId }}
          </el-descriptions-item>
          <el-descriptions-item label="设备名称">
            {{ selectedDevice.deviceName }}
          </el-descriptions-item>
          <el-descriptions-item label="设备类型">
            <el-tag :type="getDeviceTypeTag(selectedDevice.deviceType)" size="small">
              {{ getDeviceTypeText(selectedDevice.deviceType) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="办公室">
            {{ getOfficeName(selectedDevice.officeId) }}
          </el-descriptions-item>
          <el-descriptions-item label="办公区">
            {{ getWorkAreaName(selectedDevice.workAreaId) }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="selectedDevice.status === 'ONLINE' ? 'success' : 'info'">
              {{ getStatusText(selectedDevice.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="固件版本">
            {{ selectedDevice.firmwareVersion || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="描述" :span="isMobile ? 1 : 2">
            {{ selectedDevice.description || '--' }}
          </el-descriptions-item>
        </el-descriptions>

        <el-divider>最新传感器数据</el-divider>

        <div v-if="deviceSensorData" class="sensor-data-grid">
          <el-card class="data-item">
            <div class="data-content">
              <el-icon :size="isMobile ? 24 : 30" color="#409EFF"><Sunny /></el-icon>
              <div class="data-info">
                <div class="data-label">光照强度</div>
                <div class="data-value">{{ deviceSensorData.light ? parseFloat(deviceSensorData.light).toFixed(0) : '--' }} lux</div>
              </div>
            </div>
          </el-card>

          <el-card class="data-item">
            <div class="data-content">
              <el-icon :size="isMobile ? 24 : 30" color="#F56C6C"><Orange /></el-icon>
              <div class="data-info">
                <div class="data-label">温度</div>
                <div class="data-value">{{ deviceSensorData.temperature ? parseFloat(deviceSensorData.temperature).toFixed(2) : '--' }} ℃</div>
              </div>
            </div>
          </el-card>

          <el-card class="data-item">
            <div class="data-content">
              <el-icon :size="isMobile ? 24 : 30" color="#67C23A"><Coffee /></el-icon>
              <div class="data-info">
                <div class="data-label">湿度</div>
                <div class="data-value">{{ deviceSensorData.humidity ? parseFloat(deviceSensorData.humidity).toFixed(2) : '--' }} %</div>
              </div>
            </div>
          </el-card>

          <el-card class="data-item">
            <div class="data-content">
              <el-icon :size="isMobile ? 24 : 30" :color="deviceSensorData.flame ? '#F56C6C' : '#909399'">
                <Warning />
              </el-icon>
              <div class="data-info">
                <div class="data-label">火焰检测</div>
                <div class="data-value">
                  <el-tag :type="deviceSensorData.flame ? 'danger' : 'success'" size="small">
                    {{ deviceSensorData.flame ? '检测到火焰' : '正常' }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <el-empty v-else description="暂无传感器数据" />
      </div>
    </el-dialog>

    <!-- 设备控制对话框 -->
    <el-dialog 
      v-model="controlVisible" 
      title="设备控制" 
      :width="isMobile ? '95%' : '50%'"
      class="device-control-dialog"
    >
      <div v-if="selectedDevice" class="control-content">
        <el-alert
          title="设备控制"
          :description="`正在控制设备: ${selectedDevice.deviceName} (${selectedDevice.deviceId})`"
          type="info"
          show-icon
          :closable="false"
          class="control-alert"
        />

        <div class="control-panel">
          <div class="control-item">
            <label class="control-label">RGB灯光控制</label>
            <div class="control-actions">
              <el-button 
                type="success" 
                @click="controlRGB(true)"
                :loading="controlLoading"
                size="default"
              >
                开启
              </el-button>
              <el-button 
                type="danger" 
                @click="controlRGB(false)"
                :loading="controlLoading"
                size="default"
              >
                关闭
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Refresh, Sunny, Orange, Coffee,
  Warning, Sunrise, Clock
} from '@element-plus/icons-vue'
import { getDeviceList, getLatestSensorData, controlDevice as controlDeviceApi } from '@/api/device'
import axios from 'axios'

// 移动端检测
const isMobile = ref(false)

// 设备列表
const deviceList = ref([])
const allDevices = ref([]) // 存储所有设备数据

// 筛选相关
const offices = ref([])
const workAreas = ref([])
const allWorkAreas = ref([]) // 存储所有办公区数据，用于显示设备列表中的办公区名称
const selectedOfficeId = ref(null)
const selectedWorkAreaId = ref(null)
const selectedDeviceType = ref(null)

// 详情对话框
const detailVisible = ref(false)
const selectedDevice = ref(null)
const deviceSensorData = ref(null)

// 控制对话框
const controlVisible = ref(false)
const controlCommand = ref('')
const sending = ref(false)
const controlLoading = ref(false)

// 检测移动端
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 监听窗口大小变化
const handleResize = () => {
  checkMobile()
}

// 加载设备列表
const loadDevices = async () => {
  try {
    const res = await getDeviceList()
    if (res && res.code === 200) {
      // Ensure deviceList is always an array to satisfy ElTable
      allDevices.value = Array.isArray(res.data) ? res.data : []
      deviceList.value = [...allDevices.value]
      filterDevices() // 应用当前筛选条件
    } else {
      allDevices.value = []
      deviceList.value = []
      ElMessage.error(res?.message || '获取设备列表失败')
    }
  } catch (error) {
    console.error('获取设备列表失败:', error)
    ElMessage.error('获取设备列表失败')
    allDevices.value = []
    deviceList.value = []
  }
}

// 加载办公室列表
const loadOffices = async () => {
  try {
    const response = await axios.get('/api/office/list')
    if (response.data.code === 200) {
      offices.value = response.data.data || []
    }
  } catch (error) {
    console.error('获取办公室列表失败:', error)
  }
}

// 加载办公区列表
const loadWorkAreas = async (officeId) => {
  try {
    const response = await axios.get(`/api/office/${officeId}/work-areas`)
    if (response.data.code === 200) {
      workAreas.value = response.data.data || []
    }
  } catch (error) {
    console.error('获取办公区列表失败:', error)
    workAreas.value = []
  }
}

// 加载所有办公区数据（用于显示设备列表中的办公区名称）
const loadAllWorkAreas = async () => {
  try {
    const response = await axios.get('/api/office/work-areas/list')
    if (response.data.code === 200) {
      allWorkAreas.value = response.data.data || []
    }
  } catch (error) {
    console.error('加载所有办公区列表失败:', error)
    allWorkAreas.value = []
  }
}

// 办公室选择变化
const onOfficeChange = (officeId) => {
  selectedWorkAreaId.value = null
  workAreas.value = []
  if (officeId) {
    loadWorkAreas(officeId)
  }
  filterDevices()
}

// 办公区选择变化
const onWorkAreaChange = () => {
  filterDevices()
}

// 筛选设备
const filterDevices = () => {
  let filtered = [...allDevices.value]
  
  // 按办公室筛选
  if (selectedOfficeId.value) {
    filtered = filtered.filter(device => device.officeId === selectedOfficeId.value)
  }
  
  // 按办公区筛选
  if (selectedWorkAreaId.value) {
    filtered = filtered.filter(device => device.workAreaId === selectedWorkAreaId.value)
  }
  
  // 按设备类型筛选
  if (selectedDeviceType.value) {
    filtered = filtered.filter(device => device.deviceType === selectedDeviceType.value)
  }
  
  deviceList.value = filtered
}

// 获取办公室名称
const getOfficeName = (officeId) => {
  if (!officeId) return '-'
  // 将ID转换为字符串进行比较，确保类型匹配
  const office = offices.value.find(o => String(o.id) === String(officeId))
  return office ? office.officeName : '-'
}

// 获取办公区名称
const getWorkAreaName = (workAreaId) => {
  if (!workAreaId) return '-'
  
  // 将ID转换为字符串进行比较，确保类型匹配
  const idStr = String(workAreaId)
  
  // 优先从所有办公区数据中查找
  const workArea = allWorkAreas.value.find(w => String(w.id) === idStr)
  if (workArea) {
    return workArea.areaName
  }
  
  // 如果没找到，再从筛选器的办公区中查找
  const localWorkArea = workAreas.value.find(w => String(w.id) === idStr)
  return localWorkArea ? localWorkArea.areaName : '-'
}

// 刷新设备列表
const refreshDevices = () => {
  loadDevices()
  ElMessage.success('刷新成功')
}

// 查看设备详情
const viewDevice = async (device) => {
  selectedDevice.value = device
  detailVisible.value = true

  // 加载传感器数据
  try {
    const res = await getLatestSensorData(device.deviceId)
    if (res.code === 200 && res.data) {
      deviceSensorData.value = res.data
    }
  } catch (error) {
    console.error('获取传感器数据失败:', error)
  }
}

// 打开控制对话框
const controlDevice = (device) => {
  selectedDevice.value = device
  controlCommand.value = ''
  controlVisible.value = true
}

// 发送控制命令
const sendControlCommand = async () => {
  if (!controlCommand.value) {
    ElMessage.warning('请选择控制命令')
    return
  }

  sending.value = true
  try {
    const res = await controlDeviceApi({
      deviceId: selectedDevice.value.deviceId,
      action: controlCommand.value
    })

    if (res.code === 200) {
      ElMessage.success(res.message || '控制命令已发送')
      controlVisible.value = false
    } else {
      ElMessage.error(res.message || '发送命令失败')
    }
  } catch (error) {
    console.error('发送控制命令失败:', error)
    ElMessage.error('发送命令失败')
  } finally {
    sending.value = false
  }
}

// RGB控制功能
const controlRGB = async (isOn) => {
  controlLoading.value = true
  try {
    const res = await controlDeviceApi({
      deviceId: selectedDevice.value.deviceId,
      action: isOn ? 'rgb_on' : 'rgb_off'
    })

    if (res.code === 200) {
      ElMessage.success(res.message || `RGB灯已${isOn ? '开启' : '关闭'}`)
      controlVisible.value = false
    } else {
      ElMessage.error(res.message || '控制失败')
    }
  } catch (error) {
    console.error('RGB控制失败:', error)
    ElMessage.error('控制失败')
  } finally {
    controlLoading.value = false
  }
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return '--'
  const date = new Date(time)
  return date.toLocaleString('zh-CN')
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'ONLINE': '在线',
    'OFFLINE': '离线',
    'FAULT': '故障'
  }
  return statusMap[status] || status
}

// 获取设备类型标签
const getDeviceTypeTag = (type) => {
  const tagMap = {
    'AIR_CONDITIONER': 'primary',
    'HUMIDIFIER': 'success',
    'LIGHT': 'warning',
    'SENSOR': 'info',
    'OTHER': ''
  }
  return tagMap[type] || ''
}

// 获取设备类型文本
const getDeviceTypeText = (type) => {
  const textMap = {
    'AIR_CONDITIONER': '空调',
    'HUMIDIFIER': '加湿器',
    'LIGHT': '灯光',
    'SENSOR': '传感器',
    'OTHER': '其他'
  }
  return textMap[type] || type
}

onMounted(async () => {
  // 先加载基础数据（办公室和办公区）
  await Promise.all([
    loadOffices(),
    loadAllWorkAreas()
  ])
  // 然后加载设备列表
  loadDevices()
  checkMobile()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.devices {
  padding: 0;
}

.devices-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.header-title {
  font-weight: 600;
  color: #333;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-text {
  display: inline;
}

/* 移动端设备卡片 */
.mobile-device-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.device-card-mobile {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 15px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.device-card-mobile:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.device-info {
  flex: 1;
  min-width: 0;
}

.device-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-id {
  font-size: 13px;
  color: #666;
  margin: 0;
  font-family: 'Courier New', monospace;
}

.device-status {
  flex-shrink: 0;
  margin-left: 10px;
}

.device-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.detail-item .label {
  color: #666;
  font-weight: 500;
  min-width: 60px;
}

.detail-item .value {
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 桌面端表格 */
.devices-table {
  border-radius: 8px;
  overflow: hidden;
}

/* 对话框样式 */
.device-detail-dialog .el-dialog__body {
  padding: 20px;
}

.device-detail-content {
  max-height: 70vh;
  overflow-y: auto;
}

.device-descriptions {
  margin-bottom: 20px;
}

.sensor-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.data-item {
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.data-item:hover {
  transform: translateY(-2px);
}

.data-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.data-info {
  flex: 1;
  min-width: 0;
}

.data-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.data-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.control-content {
  padding: 10px 0;
}

.control-alert {
  margin-bottom: 20px;
}

.control-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.control-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

.control-label {
  font-weight: 500;
  color: #333;
}

.control-actions {
  display: flex;
  gap: 10px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .filters {
    justify-content: center;
    margin-bottom: 10px;
  }
  
  .filters .el-select {
    width: 120px !important;
    margin-right: 5px !important;
  }
  
  .refresh-btn .btn-text {
    display: none;
  }
  
  .device-card-mobile {
    margin: 0 -10px;
  }
  
  .device-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .device-actions {
    justify-content: center;
  }
  
  .device-details {
    grid-template-columns: 1fr;
  }
  
  .detail-item {
    justify-content: space-between;
  }
  
  .sensor-data-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .data-content {
    gap: 10px;
  }
  
  .data-value {
    font-size: 16px;
  }
  
  .control-panel {
    padding: 10px;
  }
  
  .control-item {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    text-align: center;
  }
  
  .control-actions {
    justify-content: center;
    margin-top: 10px;
  }
  
  .device-detail-dialog .el-dialog__body {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .device-card-mobile {
    padding: 12px;
  }
  
  .device-name {
    font-size: 15px;
  }
  
  .device-id {
    font-size: 12px;
  }
  
  .detail-item {
    font-size: 12px;
  }
  
  .detail-item .label {
    min-width: 50px;
  }
  
  .device-actions {
    gap: 8px;
  }
  
  .device-actions .el-button {
    padding: 5px 10px;
    font-size: 12px;
  }
  
  .sensor-data-grid {
    gap: 10px;
  }
  
  .data-content {
    gap: 8px;
  }
  
  .data-label {
    font-size: 12px;
  }
  
  .data-value {
    font-size: 14px;
  }
  
  .control-item {
    padding: 12px;
  }
  
  .device-detail-dialog .el-dialog__body {
    padding: 10px;
  }
}

/* 横屏适配 */
@media (max-width: 768px) and (orientation: landscape) {
  .sensor-data-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .device-detail-content {
    max-height: 60vh;
  }
}
</style>
